<template>
  <div class="booking-list" v-loading="loading" element-loading-text="加载中">
    <el-card class="custom-box-card">
      <div class="custom-header">
        <span class="custom-title">预订信息列表</span>
      </div>
      <!-- 搜索 -->
      <div class="custom-form-search">
        <el-form @submit.prevent.stop :inline="true" size="mini">
          <el-form-item label="订单编号">
            <el-input v-model="search.orderId"></el-input>
          </el-form-item>
          <el-form-item label="用户名">
            <el-input v-model="search.username"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="searchSubmit" icon="el-icon-search">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="list-table-page">
        <div class="list-table">
          <el-table border :data="list" style="width: 100%" highlight-current-row>
            <el-table-column type="index" label="#"></el-table-column>
            <!-- 表格列 -->
            <el-table-column label="订单编号" width="150">
              <template v-slot="{ row }">
                {{ row.orderId }}
              </template>
            </el-table-column>
            <el-table-column label="用户名" width="150">
              <template v-slot="{ row }">
                {{ row.username }}
              </template>
            </el-table-column>
            <el-table-column label="房间类型" width="150">
              <template v-slot="{ row }">
                {{ row.roomType }}
              </template>
            </el-table-column>
            <el-table-column label="窗户偏好" width="150">
              <template v-slot="{ row }">
                {{ row.window }}
              </template>
            </el-table-column>
            <el-table-column label="是否包含早餐" width="150">
              <template v-slot="{ row }">
                {{ row.breakfast }}
              </template>
            </el-table-column>
            <el-table-column label="入住日期" width="150">
              <template v-slot="{ row }">
                {{ row.checkInDate }}
              </template>
            </el-table-column>
            <el-table-column label="退房日期" width="150">
              <template v-slot="{ row }">
                {{ row.checkOutDate }}
              </template>
            </el-table-column>
            <el-table-column label="预订时间" width="150">
              <template v-slot="{ row }">
                {{ formatTimestamp(row.bookingTime) }}
              </template>
            </el-table-column>
            <el-table-column label="酒店编号" width="150">
              <template v-slot="{ row }">
                {{ row.hotelId }}
              </template>
            </el-table-column>
            <el-table-column label="状态" width="150">
              <template v-slot="{ row }">
                {{ row.status }}
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template v-slot="{ row }">
                <el-button-group>
                  <el-tooltip content="删除" placement="top">
                    <el-button
                      icon="el-icon-remove"
                      type="danger"
                      size="mini"
                      @click="deleteItem(row)"
                      style="background-color: rgb(229 79 110); border-color: rgb(229 79 110);"
                    ></el-button>
                  </el-tooltip>
                </el-button-group>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="custom-pagination" style="margin-top: 10px; text-align: center">
          <el-pagination
            @current-change="loadList"
            :current-page="page"
            :page-size="pagesize"
            @size-change="sizeChange"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalCount"
          >
          </el-pagination>
        </div>
      </div>
    </el-card>
  </div>
</template>

<style scoped>
.booking-list {
  .custom-box-card {
    .custom-header {
      background: #7fabbe;
      margin: 15px;
      color: #fdfcfc;
      padding: 15px 20px;
      font-weight: bold;
      letter-spacing: 9px;
      border-radius: 8px;
    }

    .custom-form-search {
      padding-left: 20px;
      padding-top: 15px;
      margin-bottom: 20px;
      border-radius: 4px;

      .el-form-item__label {
        color: #333;
        font-weight: bold;
      }

      .el-button {
        background-color: #659ab1;
        color: #fff;

        &:hover {
          background-color: #b3cdd8;
          border: #b3cdd8;
        }
      }
    }

    .list-table-page {
      .list-table {
        padding: 0 20px;

        .el-table__header-wrapper {
          background-color: #f5f7fa;
        }

        .el-table__row {
          &:hover {
            background-color: #f0f0f0;
          }
        }
      }

      .custom-pagination {
        text-align: center;
        margin-top: 20px;
        padding: 0 20px;

        .el-pagination__total {
          font-size: 14px;
          color: #666;
        }

        .el-pagination__sizes .el-select-dropdown__item {
          font-size: 14px;
        }
      }
    }
  }
}
</style>

<script>
import api from "@/api";
import { remove } from "@/utils/utils";
import { extend } from "@/utils/extend";

export default {
  data() {
    return {
      loading: false,
      list: [],
      search: {
        orderId: "",
        username: "",
      },
      page: 1,
      pagesize: 10,
      totalCount: 0,
    };
  },
  methods: {
    // 设置搜索条件
    searchSubmit() {
      this.setSearchParamsToCookie();
      this.loadList(1);
    },
    sizeChange(e) {
      this.pagesize = e;
      this.loadList(1);
    },
    setSearchParamsToCookie() {
      const searchParams = {
        orderId: this.search.orderId,
        username: this.search.username,
        page: this.page,
        pagesize: this.pagesize
      };
      this.setCookie('searchParams', JSON.stringify(searchParams), 1);
      console.log('SetSearchParamsToCookie - Search Params:', searchParams);
    },
    setCookie(name, value, days) {
      var expires = "";
      if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        expires = "; expires=" + date.toUTCString();
      }
      document.cookie = name + "=" + (value || "") + expires + "; path=/";
    },
    getSearchParamsFromCookie() {
      const cookieValue = this.getCookie('searchParams');
      return cookieValue ? JSON.parse(cookieValue) : {};
    },
    getCookie(name) {
      var nameEQ = name + "=";
      var ca = document.cookie.split(';');
      for (var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') c = c.substring(1, c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
      }
      return null;
    },
    // 获取酒店数据
    loadList(page) {
      if (this.loading) return;
      this.loading = true;
      this.page = page;
      var filter = this.getSearchParamsFromCookie();
      console.log('LoadList - Filter from Cookie:', filter);
      filter.page = page.toString();
      filter.pagesize = this.pagesize.toString();
      this.$post(api.booking.bookinglist, filter)
        .then((res) => {
          console.log(res, "res");
          this.loading = false;
          if (res.code === 0) {
            this.list = res.data.list;
            this.totalCount = res.data.totalCount || 0;
            console.log("获取到的页数：", res.data.totalCount);
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((err) => {
          this.loading = false;
          this.$message.error(err.message);
        });
    },
    // 删除数据
    deleteItem(row) {
      this.$confirm("确定删除数据？", "提示", {
        type: "warning",
      })
        .then(() => {
          this.loading = true;
          this.$post(api.booking.delete, { id: row.id })
            .then((res) => {
              this.loading = false;
              if (res.code === 0) {
                remove(this.list, row);
              } else {
                this.$message.error(res.msg);
              }
            })
            .catch((err) => {
              this.loading = false;
              this.$message.error(err.message);
            });
        })
        .catch(() => {});
    },
    formatTimestamp(timestamp) {
      const date = new Date(timestamp);
      return date.toLocaleString("zh-CN", { year: "numeric", month: "2-digit", day: "2-digit" });
    },
  },
  created() {
    this.loadList(this.page);
  },
};
</script>
